
var formulbox=document.querySelector(".ulbox");
var form=document.querySelector(".form");
var stop=document.querySelector(".stop");
var shopid=0;
var areaid=0;
// 点击stop  form 隐藏显现
flag=true;
stop.onclick=function(){
if(flag){
    form.style.display="block";
    flag=false
}else if(!flag){
     form.style.display="none";
     flag=true;
}
/*  渲染stop内的内容 */
let xhr1=new XMLHttpRequest();
xhr1.open("get",`http://chst.vip:1234/api/getgsshop`,false)
xhr1.onload=function(){
   var lis='';
  if(xhr1.status===200){
  let res1=JSON.parse(xhr1.responseText);
                  console.log(res1.result);
                  res1.result.forEach(element => {
                                 lis+=`
                                 <li id="${element.shopId}">${element.shopName}</li>
                                 `     
                  });
}
formulbox.innerHTML=lis;
}
xhr1.send();

/* 点击li改变span内的内容 form 设为display：none； */
formulbox.onclick=function(e){
                    var e = e || window.event;
                    var target = e.target || e.srcElement;
                    var x=target.innerHTML;
                    console.log(x);

                    lis3=`
                                        <span>${x}</span>
                                        <span>^</span>
                    `
                    stop.innerHTML=lis3;
                    form.style.display="none";
                    // 获取shopid  areaid 进行product内容渲染
                    shopid = target.id;
                    ajax(shopid,areaid)               
}

/* ``` */
form.style.display="block";
}


///* ----------------------------------------------------------------------- */

// 点击place  form 隐藏显现隐藏显现
var place=document.querySelector(".place");
var fl=true;

place.onclick=function(){
         if(fl){
                    form.style.display="block";
                    fl=false;
         }else if(!fl){
                    form.style.display="none";
                    fl=true;
         }  
         /* 渲染place内的内容 */
                    let xhr2=new XMLHttpRequest();
                    xhr2.open("get",`http://chst.vip:1234/api/getgsshoparea`,false)
                    xhr2.onload=function(){
                    var lis2='';
                    if(xhr2.status===200){
                    let res2=JSON.parse(xhr2.responseText);
                    console.log(res2.result);
                    res2.result.forEach(some=>{
                                        lis2+=`
                                        <li id="${some.areaId}">${some.areaName}</li>
                                        `                   
                    })
                    }
                    formulbox.innerHTML=lis2;
                    }
                    xhr2.send();   

                   /*  点击li改变span内的内容 form 设为display：none； */
                    formulbox.onclick=function(e){
                    var e = e || window.event;
                    var target = e.target || e.srcElement;
                    var x=target.innerHTML;
                    console.log(x);
                    var s=x.slice(0,2);
                    console.log(s);

                    lis3=`
                                        <span>${s}</span>
                                        <span>^</span>
                    `
                    place.innerHTML=lis3;
                    form.style.display="none";

                     // 获取shopid  areaid 进行product内容渲染
                     areaid = target.id;
                     ajax(shopid,areaid)    
                    }
/* ```` */              
 form.style.display="block";                
}

/* ----------------------------------------------------------------------------- */
// content的渲染
var proul=document.querySelector(".proul");
let xhr3=new XMLHttpRequest();
xhr3.open("get",`http://chst.vip:1234/api/getgsproduct?shopid=${shopid}&areaid=${areaid}`,false)
xhr3.onload=function(){
var lis3='';
if(xhr3.status===200){
let res3=JSON.parse(xhr3.responseText);
console.log(res3.result);
res3.result.forEach(exit=>{
            lis3+=`
            <li>
            <a href="">
                <img src="${exit.productImg}" alt="">
                <div class="titl">${exit.productName}</div>
                <p class="price">${exit.productPrice}</p>
            </a>
            </li>
            `        
})
proul.innerHTML=lis3;
}}
xhr3.send();
// 封装函数
function ajax(shopid,areaid){
                   
let xhr3=new XMLHttpRequest();
xhr3.open("get",`http://chst.vip:1234/api/getgsproduct?shopid=${shopid}&areaid=${areaid}`,false)
xhr3.onload=function(){
var lis3='';
if(xhr3.status===200){
let res3=JSON.parse(xhr3.responseText);
console.log(res3.result);
res3.result.forEach(exit=>{
                    lis3+=`
                    <li>
                    <a href="">
                    <img src="${exit.productImg}" alt="">
                    <div class="titl">${exit.productName}</div>
                    <p class="price">${exit.productPrice}</p>
                    </a>
                    </li>
                    `        
})
proul.innerHTML=lis3;
}}
xhr3.send();

}


